<template>
	<view class="tui-container">
		<view class="tui-searchbox">
			<view class="tui-rolling-search">
				<icon type="search" :size='13' color='#999'></icon>
				<!-- <view > -->
				<input type="text" class="tui-swiper" placeholder="请输入店铺名搜索" confirm-type="search" @blur="search" v-model="shopName">
				<tui-icon name="shut" :size='16' color='#999' style="width:50rpx;" v-if="shopName" @click="clearInput"></tui-icon>
				<!-- </view> -->
			</view>
		</view>
		<!--banner-->
		<swiper indicator-dots autoplay circular :interval="5000" :duration="150" indicator-color="rgba(255, 255, 255, 0.9)"
		 indicator-active-color="#5677fc" class="tui-banner-swiper" :style="{height: bannerHeight+'rpx'}">
			<swiper-item v-for="(item,index) in banner" :key="index" @tap.stop="bannerDetail">
				<image :src="item.adsPic" class="tui-slide-image" mode="widthFix" />
			</swiper-item>
		</swiper>

		<!--新闻列表-->
		<view class="tui-screen-top">
			<view class="tui-top-item" :class="[tabIndex == 1 ? 'tui-active tui-bold' : '']" @tap="sortShopList" data-index="1">
				<tui-icon name="category" :size="16" :color="[tabIndex == 1 ? '#e41f19' : '#000']"></tui-icon>
				<text>综合</text>
			</view>
			<view class="tui-top-item" :class="[tabIndex == 2 ? 'tui-active tui-bold' : '']" @tap="sortShopList" data-index="2">
				<tui-icon name="redpacket" :size="16" :color="[tabIndex == 2 ? '#e41f19' : '#000']"></tui-icon>
				<text>返利</text>
			</view>
			<view class="tui-top-item" :class="[tabIndex == 3 ? 'tui-active tui-bold' : '']" @tap="sortShopList" data-index="3">
				<tui-icon name="position" :size="16" :color="[tabIndex == 3 ? '#e41f19' : '#000']"></tui-icon>
				<text>距离</text>
			</view>
		</view>
		<view class="tui-news-view">
			<block v-for="(item,index) in shopList" :key="index">
				<tui-list-cell :index="index" @click="detail" :unlined="count==index">
					<view class="tui-news-flex tui-flex-start">
						<view class="tui-news-picbox tui-w220 tui-h180">
								<image :src="item.shopUrl" mode="scaleToFill" class="tui-h180"></image>
						</view>
						<view class="tui-news-tbox tui-flex-column tui-flex-between">
							<view class="tui-news-title"><text>{{item.shopName}}</text><text style="font-size: 24rpx;color:#a7a7a7">{{item.distance}}km</text></view>
							<view class="tui-sub-box tui-pt20">
								<view class="tui-sub-source">
									<view class="backCash">返{{item.backCash}}元现金红包</view>
								</view>
								<view class="tui-sub-source">{{item.shopTypeName}}</view>
								<!-- <view class="tui-sub-source">{{item.coupon}}</view> -->
								<view class="tui-sub-source">
									<view class="meituan-yellow">{{item.coupon}}</view>
									<view class="meituan-yellow">
										<!-- <block v-for="(platform,pIndex) in item.platformName.split('/')" :key="pIndex">
											<tui-badge :type="[platform == '美团' ? 'warning' : 'primary']" :margin="pIndex==1?'0 0 0 15rpx':'0'">{{platform}}</tui-badge>
										</block> -->
										{{item.platformName}}
									</view>

								</view>
							</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
			<tui-button height="60rpx" type="danger" shape="circle" shadow @click="participate" width="200rpx" style="position: fixed; bottom:200rpx; right:10rpx;">参加活动</tui-button>

		</view>
		<tui-tips ref="toast"></tui-tips>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->


	</view>
</template>

<script>
	import {
		BASE_URL
	} from "../../../common/httpRequest.js"
	export default {
		computed: {
			noMore() {
				return this.shopList.length >= this.total;
			},
			disabled() {
				return this.loadding || this.noMore;
			},
			count() {
				return this.shopList.length - 1
			}
		},
		data() {
			return {
				baseUrl: BASE_URL,
				banner: [{
					img: "banner_1.jpg",
					title: "山东官方：德尔加多已完成全部手续办理，具备上场比赛资格"
				}, {
					img: "banner_2.jpg",
					title: "这个世界上，或许没有真正的托黑"
				}, {
					img: "banner_3.jpg",
					title: "金童再见！西班牙前锋托雷斯宣布退役"
				}],
				shopList: [],
				total: 5,
				pageNum: 1,
				orderByColumn: 'backCash desc,distance',
				isAsc: 'asc',
				shopName: '',
				loadding: false,
				pullUpOn: true,
				tabIndex: 1,
				longitude:'',
				latitude:'',
				bannerHeight:200
			}
		},
		onLoad: function(options) {
			let self=this
			uni.getSystemInfo({
				success: function(res) {
					self.bannerHeight=res.windowWidth/1098*400*2	
				}
			})
			this.getBanners()
			
			
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							self.longitude=res.longitude
							self.latitude=res.latitude
						},
						complete(){
							self.shopList = []
							self.pageNum = 1
							self.getShopList()
						}
					});
				}
			})
			

		},
		methods: {
			sortShopList: function(e) {
				let index = e.currentTarget.dataset.index;
				if (index == 1) {
					this.tabIndex = 1;
					this.orderByColumn = "backCash desc,distance"
					this.isAsc = 'asc'
				} else if (index == 2) {
					this.tabIndex = 2;
					this.orderByColumn = "backCash"
					this.isAsc = 'desc'
				} else if (index == 3) {
					this.tabIndex = 3;
					this.orderByColumn = "distance"
					this.isAsc = 'asc'
				}
				this.pageNum = 1
				this.shopList = []
				this.getShopList()
			},
			clearInput() {
				this.shopName = ""
				this.pageNum = 1
				this.shopList = []
				this.getShopList()
			},
			search: function(e) {
				this.pageNum = 1
				this.shopList = []
				this.getShopList()
			},
			bannerDetail: function() {
				
			},
			detail(e) {
				let index = e.index;
				let url = "/pages/shopDetail/shopDetail";
				uni.navigateTo({
					url: url + '?shopId=' +this.shopList[index].shopId,
				})
			},
			participate(){
				uni.navigateTo({
					url: "/pages/activity/activity",
				})
			},
			getShopList() {
				this.tui.request("/api/shop/list", "GET", {
					pageSize: 5,
					lat:this.latitude,
					lng:this.longitude,
					pageNum: this.pageNum,
					shopName: this.shopName,
					orderByColumn: this.orderByColumn,
					isAsc: this.isAsc,
				}, false, false, true).then(res => {
					this.shopList = this.shopList.concat(res.rows);
					this.total = res.total
					this.pageNum = this.pageNum + 1;
					this.loadding = false
				})
			},
			getBanners() {
				this.tui.request("/api/home/ads", "GET", {
				}, false, false, true).then(res => {
					this.banner=res.data
				})
			},
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			this.shopList = []
			this.getShopList()
			this.pageNum = 1;
			this.pullUpOn = true;
			this.loadding = false;
			uni.stopPullDownRefresh();
			// let options = {
			// 	msg: "刷新成功，为你更新了10条数据",
			// 	duration: 2000,
			// 	type: "translucent"
			// };
			// setTimeout(() => {
			// 	this.$refs.toast.showTips(options);
			// }, 300);
		},

		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.noMore) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				this.getShopList()
			}
		}
	}
</script>

<style>
	.tui-container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-searchbox {
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		background-color: #F2F2F2;
	}

	.tui-rolling-search {
		width: 100%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.tui-slide-image {
		width: 100%;
		display: block;
	}

	.tui-banner-title {
		width: 100%;
		height: 100rpx;
		position: absolute;
		z-index: 9999;
		color: #fff;
		bottom: 0;
		padding: 0 30rpx;
		padding-top: 25rpx;
		font-size: 34rpx;
		font-weight: bold;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* #ifdef MP-WEIXIN  */
	.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #5677fc;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 18rpx;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	>>>.tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background: #5677fc;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 18rpx;
	}

	/* #endif */

	.tui-news-flex {
		width: 100%;
		display: flex;
	}

	.tui-flex-start {
		align-items: flex-start !important;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-flex-column {
		flex-direction: column !important;
	}

	.tui-flex-between {
		justify-content: space-between !important;
	}

	.tui-news-cell {
		display: flex;
		padding: 20rpx 30rpx;
	}

	.tui-news-tbox {
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		display: flex;
	}

	.tui-news-picbox {
		display: flex;
		position: relative;
	}

	.tui-w220 {
		width: 220rpx;
	}

	.tui-h180 {
		height: 180rpx;
	}

	.tui-block {
		display: block;
	}

	.tui-w-full {
		width: 100%;
	}

	.tui-one-third {
		width: 33%;
	}

	.tui-news-title {
		width: 100%;
		font-size: 30rpx;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		box-sizing: border-box;
		padding-left: 20rpx;
		padding-bottom: 5rpx;
		display:flex;
		justify-content: space-between;
	}

	.tui-pl-20 {
		padding-left: 20rpx;
	}

	.tui-pt20 {
		padding-top: 20rpx;
	}

	.tui-pt10 {
		padding-top: 10rpx;
	}

	.tui-sub-box {
		color: #999;
		box-sizing: border-box;
		line-height: 24rpx;
		padding: 0 20rpx;
	}

	.tui-sub-discount {
		font-size: 24rpx;
		padding: 6rpx 0;
	}

	.tui-sub-source {
		font-size: 24rpx;
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.backCash {
		border: 1rpx solid #e4393c;
		color: #e4393c;
		padding:6rpx;
		font-size: 24rpx;
	}

	.meituan-yellow {
		color: rgb(254, 194, 44)
	}

	.ele-blue {
		color: rgb(0, 155, 226)
	}


	.tui-scale {
		transform: scale(0.6);
		transform-origin: center center;
	}

	.tui-btm-badge {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 24rpx;
		color: #fff;
		padding: 2rpx 12rpx;
		background: rgba(0, 0, 0, 0.6);
		z-index: 20;
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}



	.tui-icon {
		/* background: rgba(0, 0, 0, 0.5); */
		border-radius: 50%;
		padding: 26rpx;
	}

	.tui-screen-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		height: 88rpx;
		position: relative;
		background: #fff;
	}

	.tui-top-item {
		height: 28rpx;
		line-height: 28rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-active {
		color: #e41f19;
	}

	.tui-topitem-active {
		color: #e41f19;
	}
</style>
